<!-- 日志模块 -->
<script>
import axios from 'axios';
import { getData, postData } from '@/service/getData';
import ExcelJS from 'exceljs';
export default {
  data() {
    return {
      activeName: '内容过滤',
      role: 'admin',
      dialogVisible: false,
      list: [],
      list2: [],
      uploadParams: {
        uploadUrl: '/agent/corrector/upload_original_file',
        data: {},
        headers: {
          Authorization: '',
        },
        name: 'file',
        fileLists: [],
      },
      form: {
        question: '',
      },
    };
  },
  methods: {
    getInfo() {
      postData('/api/qa/get_qareq_list/')
        .catch((err) => {})
        .then((res) => {
          this.list = res.data;
        });
      postData('/api/qa/get_sensitive_word_list/')
        .catch((err) => {})
        .then((res) => {
          this.list2 = res.data;
        });
      //
    },
    deleteInfo(id) {
      axios
        .post(
          'api/qa/drop_qareq/',
          {
            id: id,
          },
          {
            headers: {
              Authorization: this.uploadParams.headers['Authorization'],
            },
          },
        )
        .then((res) => {
          this.$message.success('删除成功');
          this.getInfo();
        });
    },
    deleteInfo2(id) {
      axios
        .post(
          'api/qa/drop_sensitive_word/',
          {
            id: id,
          },
          {
            headers: {
              Authorization: this.uploadParams.headers['Authorization'],
            },
          },
        )
        .then((res) => {
          this.$message.success('删除成功');
          this.getInfo();
        });
    },
    changeInfo(id, selected) {
      axios
        .post(
          'api/qa/modify_qareq/',
          {
            id: id,
            selected: selected,
          },
          {
            headers: {
              Authorization: this.uploadParams.headers['Authorization'],
            },
          },
        )
        .then((res) => {
          this.$message.success('修改成功');
          this.getInfo();
        });
    },
    changeInfo2(id, selected) {
      axios
        .post(
          'api/qa/modify_sensitive_word/',
          {
            id: id,
            is_active: selected,
          },
          {
            headers: {
              Authorization: this.uploadParams.headers['Authorization'],
            },
          },
        )
        .then((res) => {
          this.$message.success('修改成功');
          this.getInfo();
        });
    },
    handleClose(done) {
      this.form = {
        question: '',
      };
      this.dialogVisible = false;
    },
    createQa() {
      var url = '';
      var obj = {};
      if (this.activeName === '内容过滤') {
        url = 'api/qa/add_qareq/';
        obj = {
          req: this.form.question,
        };
      } else {
        url = 'api/qa/add_sensitive_word/';
        obj = {
          word: this.form.question,
        };
      }
      axios
        .post(
          url,
          {
            ...obj,
          },
          {
            headers: {
              Authorization: this.uploadParams.headers['Authorization'],
            },
          },
        )
        .then((res) => {
          this.$message.success('创建成功');
          this.getInfo();
          this.handleClose();
        });
    },
  },
  mounted() {
    //  初始化
    let token = localStorage.getItem('token');
    this.uploadParams.headers['Authorization'] = 'Token ' + token;
    this.getInfo();
    //
  },
};
</script>

<template>
  <div class="mainStyle">
    <div class="contentRight columnFlex">
      <el-dialog
        title="创建过滤条件"
        :visible.sync="dialogVisible"
        width="700"
        :before-close="handleClose"
      >
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="输入过滤内容">
            <el-input
              v-model="form.question"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 6 }"
            ></el-input>
          </el-form-item>
          <div class="btn-line">
            <el-button type="primary" style="float: right" @click="createQa"> 提交 </el-button>
            <el-button style="float: right; margin-right: 10px" @click="handleClose">
              关闭
            </el-button>
          </div>
        </el-form>
      </el-dialog>
      <div>
        <el-button
          @click="dialogVisible = true"
          type="primary"
          size="small"
          style="width: 150px; float: right"
          >设置过滤</el-button
        >
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="内容过滤" name="内容过滤">
          <el-alert
            title="内容过滤：为大模型问答的内容添加限制条件。如：不能涉及公司资金信息。"
            type="success"
            :closable="false"
            class="alert-item"
          >
          </el-alert>

          <el-table :data="list" class="table-container" size="small" border style="width: 100%">
            <el-table-column prop="req" label="过滤条件"> </el-table-column>
            <el-table-column prop="updated_at" label="时间"> </el-table-column>
            <el-table-column prop="submitter" label="提交人"> </el-table-column>
            <el-table-column prop="selected" label="选中状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.selected"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="changeInfo(scope.row.id, scope.row.selected)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="selected" label="操作">
              <template slot-scope="scope">
                <el-button size="small" @click="deleteInfo(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="问题过滤" name="问题过滤">
          <el-alert
            title="问题过滤：问题中不能包含以下内容，否则大模型不做回答"
            type="success"
            :closable="false"
            class="alert-item"
          >
          </el-alert>
          <el-table :data="list2" class="table-container" size="small" border style="width: 100%">
            <el-table-column prop="word" label="过滤条件"> </el-table-column>
            <el-table-column prop="updated_at" label="时间"> </el-table-column>
            <el-table-column prop="submitter" label="提交人"> </el-table-column>
            <el-table-column prop="selected" label="选中状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.is_active"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="changeInfo2(scope.row.id, scope.row.is_active)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="selected" label="操作">
              <template slot-scope="scope">
                <el-button size="small" @click="deleteInfo2(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <!-- 创建问题 -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mainStyle {
  color: #666;
  background-color: #fff;
  width: calc(100% - 20px);
  margin: 10px;
  height: calc(100% - 20px);
}
.table-container {
  margin-top: 10px;
  height: 500px;
}
//  样式穿透
.btn-line {
  padding: 20px 0;
  .submit-btn {
    width: 200px;
    float: right;
  }
}
.over-text {
  display: inline-block;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 20px;
}
.table-item {
  height: calc(100vh - 140px);
  overflow: auto;
}
.fl-line {
  padding-top: 10px;
  text-align: right;
}
.alert-item {
  margin-top: 10px;
}
</style>
